<template>
	<view class="user">
		<view class="top">
			<view class="infor">
				<view class="img1"><img src="../../static/章若楠.png">
				</view>
				<view class="text">
					<view style="font-size:20px;font-weight:600;">橘子果酱</view>
					<view style="font-size:14px;font-weight:520;">萍乡学院&nbsp;&nbsp;&nbsp;21岁&nbsp;&nbsp;&nbsp;女</view>
					<view style="font-size:14px;font-weight:520;">学号：12345</view>
				</view>
				<view class="bottom">
					<view class="setting" @click="goEditProfile">
						编辑资料
					</view>
					<view class="setting" @click="goViewReviews">评价</view>
					<view style="display:flex;margin-top:2px;">
						<view style="margin-top:-2px;"><img src="../../static/关注.png" style="width:25px;height:25px;"></view>
						关注</view>
					<view style="display:flex;margin-top:3px;margin-left:-15px;">
						<view style="margin-top:-2px;"><img src="../../static/私信.png" style="width:25px;height:25px;"></view>
						私信</view>
				</view>
			</view>
			<view class="set">
				 
				    <button 
				           class="setting" 
				           :class="{ active: currentTab === 'dynamic' }" 
				           @click="currentTab = 'dynamic'"
						   
				         >活动</button>
				         <button 
				           class="setting" 
				           :class="{ active: currentTab === 'activity' }" 
				           @click="currentTab = 'activity'"
				         >动态</button>
				         <button 
				           class="setting" 
				           :class="{ active: currentTab === 'following' }" 
				           @click="currentTab = 'following'"
				         >我的关注</button>
				         <button 
				           class="setting" 
				           :class="{ active: currentTab === 'followers' }" 
				           @click="currentTab = 'followers'"
				         >关注我的</button>
				  
			</view>
		</view>
		
<view calss="main">
					<view class="first" style="margin:5px auto ;" v-if="currentTab === 'dynamic'" v-for="item in 5">
						<view class="title">周六羽毛球</view>
						<view class="mains">
							<view style="margin-bottom: 2px;display:flex;">
								<view style="margin-top:-2px;"> <img src="../../static/时间.png"
										style="width:20px;height:20px;"></view>4月11日 周六
								16:30-18:30
							</view>
							<view style="display:flex;">
								<view style="margin-left:-2px;"><img src="../../static/位置.png"
										style="width:23px;height:23px;"></view>
								风雨球场
							</view>
							<view style="margin-top: -3px;display:flex;">
								<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>女生，男生
							</view>
						</view>
						<view class="img">
							<img src="../../static/章若楠.png" class="img2">
						</view>
						<view class="bottom1">
				
							<button class="button" @click="goDetail">组队</button>
							<view>2/4</view>
						</view>
						
					</view>
				
					<view class="post" style="margin:5px auto ;" v-if="currentTab === 'activity'" v-for="(post, index) in posts" :key="post.id">
						
						  <view class="post-header">
						    <image class="avatar" :src="post.avatar"></image>
						    <view class="username">{{ post.username }}</view>
						  </view>
						  <view class="post-content">
						    <view class="post-images">
						      <image 
						        v-for="(image, index) in post.images" 
						        :key="index"
						        :src="image"
						        class="post-image"
						        mode="widthFix"
						      ></image>
						    </view>
						    <view v-html="post.content"></view>
						  </view>
						  <view class="post-footer">
						    <view class="action-buttons">
						      <view class="like-button" @click="handleLike(post.id)">
						        <img src="../../static/like-icon.png" alt="Like" class="icon"/>
						        <text>{{ post.likes }}</text>
						      </view>
						      <view class="comment-button" @click="handleComment(post.id)">
						        <img src="../../static/comment-icon.png" alt="Comment" class="icon"/>
						        <text>{{ post.comments }}</text>
						      </view>
						    </view>
						  </view>
						
					</view>
				   <view class="followers-container" style="margin:5px auto ;" v-if="currentTab === 'following'">
					   
					       <!-- 列表标题 -->
					     
					       <!-- 用户列表 -->
					       
					         <view class="user-item">
					           <image 
					             src="../../static/微信图片_20240702165336.jpg"
								class="user-avatar"
					             mode="aspectFill"
					           ></image>
					           <text class="user-name">设计师小王</text>
					         </view>
					   
					         <!-- 用户项2 -->
					         <view class="user-item">
					           <image 
					             src="../../static/zrn.png"
					             class="user-avatar"
					             mode="aspectFill"
					           ></image>
					           <text class="user-name">前端老张</text>
					         </view>
					   
					         <!-- 用户项3 -->
					         <view class="user-item">
					           <image 
					             src="../../static/章若楠.png"
					             class="user-avatar"
					             mode="aspectFill"
					           ></image>
					           <text class="user-name">产品经理Lisa</text>
					         </view>
					       
					  
					  
					           
					      
					</view>
				    <view class="first" style="margin:5px auto ;" v-if="currentTab === 'followers'">
						<view class="user-item">
						           <image 
						             src="../../static/微信图片_20240702165336.jpg"
									class="user-avatar"
						             mode="aspectFill"
						           ></image>
						           <text class="user-name">设计师小王</text>
						         </view>
						   
						         <!-- 用户项2 -->
						         <view class="user-item">
						           <image 
						             src="../../static/zrn.png"
						             class="user-avatar"
						             mode="aspectFill"
						           ></image>
						           <text class="user-name">前端老张</text>
						         </view>
						   
						         <!-- 用户项3 -->
						         <view class="user-item">
						           <image 
						             src="../../static/章若楠.png"
						             class="user-avatar"
						             mode="aspectFill"
						           ></image>
						           <text class="user-name">产品经理Lisa</text>
						         </view>
	
						</view>
					</view>
					
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				posts: [
				  {
				    id: 1,
				    username: '用户0936TK12',
				    avatar: '/static/communityP1.jpg',
				    content: `挥洒汗水诠释快乐，阳光体育源于热爱，体力无限源于活力，向积极出发，收获健康与喜悦！`,
				    likes: 3,
				    comments: 3,
				    images: ['/static/communityR4.jpg'] 
				  }],
  currentTab: "dynamic" // 默认显示动态
			};
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: "/pages/detail/detail"
				})
			},
			goEditProfile() {
							uni.navigateTo({
								url: "/pages/editProfile/editProfile"
							})
						},
						goViewReviews() {
							uni.navigateTo({
								url: "/pages/reviews/reviews"
							})
						},
						handleLike(postId) {
						  uni.showModal({
						    title: '确认点赞',
						    content: '你确定要点赞该帖子吗？',
						    success: (res) => {
						      if (res.confirm) {
						        this.toggleLike(postId);
						      }
						    }
						  });
						},
						handleComment(postId) {
						  uni.showModal({
						    title: '确认评论',
						    content: '你确定要评论该帖子吗？',
						    success: (res) => {
						      if (res.confirm) {
						        this.goToComments(postId);
						      }
						    }
						  });
						},
						goToLikes(postId) {
						  uni.navigateTo({
						    url: `/pages/Likes/Likes?postId=${postId}`,
						    success: () => {
						      this.selectedPostId = null;
						      this.showOptions = false;
						      console.log('成功跳转至点赞页面，帖子ID:', postId);
						    },
						    fail: (err) => {
						      console.error('跳转至点赞页面失败:', err);
						      uni.showToast({
						        title: '跳转失败，请检查页面配置',
						        icon: 'none'
						      });
						    }
						  });
						},
						goToComments(postId) {
						  uni.navigateTo({
						    url: `/pages/Comments/Comments?postId=${postId}`,
						    success: () => {
						      this.selectedPostId = null;
						      this.showOptions = false;
						    },
						    fail: (err) => {
						      console.error('跳转至评论页面失败:', err);
						    }
						  });
						},
						
						 toggleLike(postId) {
						   const post = this.posts.find(p => p.id === postId);
						   if (post) {
						     post.likes = post.likes + (post.isLiked ? -1 : 1);
						     post.isLiked = !post.isLiked;
						     console.log('更新后的点赞状态:', post.likes, post.isLiked);
						     this.likeCount = this.posts.reduce((acc, p) => acc + (p.isLiked ? 1 : 0), 0);
						     console.log('总点赞数:', this.likeCount);
						   } else {
						     console.error('未找到对应的帖子，ID:', postId);
						     // 可以在这里添加用户提示，告知未找到帖子
						     uni.showToast({
						       title: '未找到帖子',
						       icon: 'none'
						     });
						   }
						 },
						         addComment(postId, comment) {
						             const MAX_COMMENT_LENGTH = 200; // 新增：评论最大长度
						             if (comment.length > MAX_COMMENT_LENGTH) {
						                 alert(`评论长度不能超过 ${MAX_COMMENT_LENGTH} 个字符！`);
						                 return;
						             }
						             const post = this.posts.find(p => p.id === postId);
						             if (post && comment.trim() !== '') {
						                 post.comments.push(comment);
						                 post.commentsCount++;
						                 this.newComment = ''; // 清空输入框
						             } else {
						                 alert('评论内容不能为空！');
						             }
						         }
						     },
		
	}
	
</script>

<style lang="scss">
	.user {
		position: relative;
	}

	.top {
		width: 390px;
		height: 270px;
		background-image: linear-gradient(105deg, #fff, #d0e6ff, #6cc0ff, #55aaff);
		padding: 35px 10px;

		.infor {
			width: 370px;
			height: 170px;
			background-color: #fff;
			border-radius: 15px;
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06); // 添加外阴影	
            background-color: #fff;
			// 内嵌阴影效果（可选）
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
				pointer-events: none;
			}

			
			.text {
				width: 200px;
				height: 100px;
				// background-color: #aaff7f;
				position: absolute;
				top: 40px;
				left: 170px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

			}

			.bottom {
				width: 370px;
				height: 50px;
				// background-color: #ff557f;
				position: absolute;
				top: 150px;
				left: 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.setting {
					width: 80px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					border: #d0e6ff solid 1.5px;
					border-radius: 25px;
				}
			}
		}

		.set {
			width: 370px;
			height: 70px;
			// background-color: #fff;
			margin-top: 15px;
			border-top: #9c9c9c solid 1.5px;
			display: flex;
			justify-content: center;
			align-items: center;

			.setting {
				width: 160px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				padding: 0 10px;
				margin: -5px 3px;
				margin-top:-5px;
				background-color: #fff;
				border: #d0e6ff solid 1.5px;
				border-radius: 25px;
				font-size:14px;
			}
		}
	}
	.img1{
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-color: #ffaa7f;
	position: absolute;
	top: 10px;
	left: 40px;
	overflow: hidden;
	display: flex;
	/* 使用 Flexbox 布局 */
	justify-content: center;
	/* 水平居中 */
	align-items: center;}

	.main {
		width: 390px;
		height: 421px;
		background-color: #aaaaff;
		margin-left:20px;
	}	
	.title {
		font-weight: 600;
		font-size: 20px;
		margin-left: 10px;
	}
	
	.mains {
		width: 320px;
		height: 70px;
		// background-color: #fff;
		margin: 5px 20px;
		font-size: 14px;
		border-bottom: #797979 solid 1.5px;
	
	}
	.first {
		width: 360px;
		height: 145px;
		margin-left: -9px;
		margin-top: 20px;
		border-radius: 10px; // 圆角边框
		padding: 10px;
		background-color: #fff; // 背景颜色
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06); // 添加外阴影
		position: relative;
		overflow: hidden;
	
		// 渐变背景（可选）
		background: linear-gradient(145deg, #ffffff, #f0f0f0);
	
		// 内嵌阴影效果（可选）
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
			pointer-events: none;
		}
		}
		.img2 {
			width: 100px;
			height: 100px;
			border-radius: 15px;
			background-color: #ffaaff; /* 背景颜色 */
			position: absolute;
			right: 30px;
			top: 5px;
			overflow: hidden; /* 防止图片超出盒子范围 */
		}
		.bottom1{
			display: flex;
			flex-direction: row-reverse;
		
			.button {
				font-size: 16px;
				width: 60px;
				height: 30px;
				background-color: #85c6ff;
				line-height: 30px;
				text-align: center;
				border-radius: 10px;
				margin: -3px 10px;
			}
		}
	.user-avatar {
	    width: 100rpx;
	    height: 100rpx;
	    border-radius: 50%;
	    margin-right: 30rpx;
	    border: 1rpx solid #f0f0f0;
	  }
	
	  .user-name {
	    font-size: 39rpx;
	    color: #333;
	    flex: 1;
	  }
	 .user-item {
	    display: flex;
	    align-items: center;
	    padding: 20rpx 0;
	    }
	.followers-container {
	  padding: 32rpx;
	  background: #ffffff;
	  border-radius: 16rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
	}
	.post-header {
	  display: flex; /* 使用flex布局 */
	  align-items: center; /* 垂直居中对齐 */
	  margin-bottom: 10px; /* 下边距 */
	}
	
	.avatar {
	  width: 40px; /* 头像宽度 */
	  height: 40px; /* 头像高度 */
	  border-radius: 50%; /* 圆形头像 */
	  margin-right: 10px; /* 右边距 */
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 小阴影效果 */
	}
	
	.username {
	  font-weight: bold; /* 加粗字体 */
	  font-size: 14px; /* 字体大小 */
	  color: #333; /* 文字颜色 */
	}
	
	/* 帖子图片 */
	.post-images .post-image {
	  width: 110px; /* 图片宽度占满容器 */
	  max-width: 200px; /* 最大宽度限制 */
	  height: auto; /* 根据比例自动调整高度 */
	  margin-bottom: 10px; /* 下边距 */
	  border-radius: 8px; /* 圆角效果 */
	  object-fit: cover; /* 图片裁剪方式 */
	}
	
	/* 帖子底部 */
	.post-footer {
	  display: flex; /* 使用flex布局 */
	  justify-content: space-between; /* 左右对齐 */
	  align-items: center; /* 垂直居中对齐 */
	  padding: 10px; /* 内边距 */
	  border-top: 1px solid #ddd; /* 上边框 */
	  background-color: #f9f9f9; /* 轻微的背景色 */
	  border-radius: 0 0 12px 12px; /* 圆角效果 */
	}
	
	/* 动作按钮 */
	.action-buttons {
	  display: flex; /* 使用flex布局 */
	  justify-content: space-between; /* 左右对齐 */
	  width: 100%; /* 占满父级宽度 */
	}
	
	.like-button, .comment-button {
	  display: flex; /* 使用flex布局 */
	  justify-content: center; /* 居中对齐 */
	  align-items: center; /* 垂直居中对齐 */
	  width: 50%; /* 占用一半宽度 */
	  padding: 8px; /* 内边距 */
	  border-radius: 8px; /* 圆角效果 */
	  transition: background-color 0.3s ease; /* 平滑过渡背景色 */
	}
	
	.like-button:hover, .comment-button:hover {
	  background-color: #e6f7ff; /* 鼠标悬停时背景色 */
	}
	
	.icon {
	  width: 24px; /* 图标宽度 */
	  height: 24px; /* 图标高度 */
	  margin-right: 5px; /* 右边距 */
	  color: #F0F8FF; /* 图标颜色 */
	  transition: color 0.3s ease; /* 平滑过渡图标颜色 */
	}
	
	.like-button:hover .icon, .comment-button:hover .icon {
	  color: #007aff; /* 鼠标悬停时图标颜色 */
	}
	.post {
	  margin-bottom: 20px; /* 下边距 */
	  padding: 15px; /* 内边距 */
	  background-color: #F0FFFF; /* 白色背景 */
	  border-radius: 14px; /* 圆角效果 */
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑缩放和阴影变化效果 */
	}
	
</style>